<template>
    <div class="box">
        <van-form>
            <div class="upload">
                <van-uploader :after-read="afterRead" />
            </div>
            <van-cell-group inset>
                <van-field v-model="user.username" name="用户名" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="user.password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field v-model="user.nickname" name="昵称" label="昵称" placeholder="昵称"
                    :rules="[{ required: true, message: '请填写昵称' }]" />
                <van-field v-model="user.userTel" name="电话" label="电话" placeholder="电话"
                    :rules="[{ required: true, message: '请填写电话' }]" />
                <van-field v-model="sex" is-link readonly name="picker" label="性别" placeholder="选择性别"
                    @click="showPicker = true" />
                <van-popup v-model:show="showPicker" round position="bottom">
                    <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
                </van-popup>
            </van-cell-group>
            <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit" @click="register">
                    注册
                </van-button>
            </div>
        </van-form>
        <div class="regist">
            <van-tag type="primary" plain size="large" @click="goLogin">有账号，去登录</van-tag>
        </div>

    </div>
</template>

<script>
import { userRegisterAPI } from "@/api/user";
import { showNotify, closeNotify } from "vant";
export default {
    data() {
        return {
            sex: "",
            user: {
                username: "",
                password: "",
                nickname: "",
                gender: "",
                userImg: "",
                userTel: "",
            },
            showPicker: false,
            columns: [
                { text: "男", value: "1" },
                { text: "女", value: "0" },
            ],
        };
    },
    methods: {
        // 点击登录连接，跳转到登录页面
        goLogin() {
            this.$router.push("/login");
        },
        onConfirm(selectedOptions) {
            this.sex = selectedOptions.selectedOptions[0].text;
            this.user.gender = selectedOptions.selectedOptions[0].value;
            this.showPicker = false;
        },
        // 上传头像
        afterRead() {
            // 需要手动完成文件上传的操作
        },
        register() {
            userRegisterAPI(this.user).then((resp) => {
                if (resp.data.code == 20000) {
                    showNotify({
                        message: resp.data.message,
                        color: "#fff",
                        background: "#8dc149",
                    });
                    this.$router.push("/login");
                } else {
                    showNotify({ type: "danger", message: resp.data.message });
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.box {
    padding: 20px;

    .upload {
        text-align: center;
    }

    .regist {
        text-align: right;
        margin-right: 20px;
    }
}
</style>